<template>
    <div>
        <div style="margin: 10px 0">
            <el-form :model="pagequery" ref="queryForm" size="small" :inline="true" label-width="68px">
                <el-form-item label="登录地址" prop="ipaddr">
                    <el-input
                            v-model="pagequery.localtion"
                            placeholder="请输入登录地址"
                            clearable
                            style="width: 240px;"
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="用户名称" prop="userName">
                    <el-input
                            v-model="pagequery.userName"
                            placeholder="请输入用户名称"
                            clearable
                            style="width: 240px;"
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="load">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table ref="tables" border stripe  v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column label="序号" type="index" align="center">
                <template slot-scope="scope">
                    <span>{{(pagequery.pageNum - 1) * pagequery.pageSize + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="会话编号" align="center" prop="uid" :show-overflow-tooltip="true"/>
            <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" sortable="custom" :sort-orders="['descending', 'ascending']" />
            <el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
            <el-table-column label="主机" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
            <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
            <el-table-column label="操作系统" align="center" prop="os" />
            <el-table-column label="操作信息" align="center" prop="msg" :show-overflow-tooltip="true" />
            <el-table-column label="登录时间" align="center" prop="loginTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.loginTime }}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-view"
                            @click="handleSignOut(scope.row)"
                    >强退
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagequery.pageNum"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="pagequery.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>


    </div>
</template>

<script>
    import * as onlineAPI from '@/api/monitor/online'
    export default {
        name: "Role",
        data() {
            return {
                // 遮罩层
                loading: true,
                tableData: [],
                total: 0,
                pagequery: {  //分页查询条件
                    pageNum: 1,
                    pageSize: 5,
                },
            }
        },
        methods: {
            load() {
                this.loading = true
                onlineAPI.getOnlinePage(this.pagequery).then(res => {
                    this.tableData = res.data.records
                    this.total = res.data.total
                    this.loading = false
                })
            },
            handleSignOut(row){
                onlineAPI.delOnlineById(row.uid).then(res=>{
                    if(res.code===200){
                        this.$message.success("id为"+row.uid+"的用户强退成功")
                        this.load()
                    }
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            reset() {
                this.pagequery = {  //分页查询条件
                    pageNum: 1,
                    pageSize: 5,
                }
                this.dateRange = ''
                this.load()
            },
            handleSizeChange(pageSize) {
                this.pagequery.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {
                this.pagequery.pageNum = pageNum
                this.load()
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.load();
            },
        },
        created() {
            this.load()
        },

    }
</script>


<style>

</style>
